:root {
  font-size:16px;
  font-family:Helvetica,Arial,sans-serif;
  background-color:#222;
  --body-width:480px;
  --card-width:420px;
  --card-height:280px;
  --image-height:226px;
  --image-expand-width:320px
}
body {
  width:var(--body-width);
  min-height:100vh;
  margin:0 auto;
  background-color:#efefef;
  display:flex;
  flex-direction:column;
  align-items:center;
}
body.noscroll {
  overflow:hidden;
}
.card {
  width:var(--card-width);
  height:var(--card-height);
  background-color:#fff;
  border-radius:12px;
  margin:15px 0;
  cursor:pointer;
  overflow:hidden;
  transition:all 0.3s cubic-bezier(0.35, 0.29, 0.05, 1.1);
  box-shadow:0 2px 2px #e0e0e0;
}
.card img {
  display:block;
  width:100%;
  height:var(--image-height);
  object-fit:cover;
  border-top-left-radius:12px;
  border-top-right-radius:12px;
}
.card h2 {
  height:30px;
  font-size:26px;
  padding:10px 22px;
  letter-spacing:0.3px;
}
.card .container {
  opacity:0;
  transition:all 0.3s ease-out;
}
.card .container .content {
  padding:0 22px 62px;
}
.card .container .content p {
  color:#888;
  line-height:1.4;
  letter-spacing:0.5px;
}
/* active status*/
.card.active {
  height:auto;
  border-radius:0;
  transform:translateY(var(--data-cardmove-top)) scale(calc(480/420));
  transform-origin:50%,0;
}
.card.active img {
  height:var(--image-expand-width);
  border-top-left-radius:0;
  border-top-right-radius:0;
}
.card.active h2 {
  padding:10px 22px 8px;
}
.card.active .container {
  overflow:auto;
  opacity:1;
  transition:all 0.3s ease-in
}